<template>
  <div class="moni">
    <div class="biaoyu">
      <router-link to="/Shouye">
        <img class="zuohao" src="../../../public/images/38_03.jpg" alt="" />
      </router-link>
      <h5>模考题库</h5>
    </div>
    <ul>
      <li class="oli">全部</li>
      <li>四级题库</li>
      <li>高中题库</li>
    </ul>
    <div class="ziliao" v-for="monikaoti in monikaotis" :key="monikaoti.id">
      <p class="tingli">{{ monikaoti.name }}</p>
      <p class="rshu">{{ monikaoti.type }}</p>
      <div class="youhao">
        <img class="youhao-a" :src="monikaoti.img" alt="" />
      </div>
    </div>
    <!-- <div class="ziliao">
      <p class="tingli">2021年6月四级第二套英语听力</p>
      <p class="rshu">28617人完成</p>
      <div class="youhao">
        <img class="youhao-a" src="../../../public/images/42_10.jpg" alt="" />
      </div>
    </div>
     <div class="ziliao">
      <p class="tingli">2021年新高考卷英语听力</p>
      <p class="rshu">42883人完成</p>
      <div class="youhao">
        <img class="youhao-a" src="../../../public/images/42_10.jpg" alt="" />
      </div>
    </div>
     <div class="ziliao">
      <p class="tingli">2021年新高考卷英语听力|模拟卷一</p>
      <p class="rshu">2109人完成</p>
      <div class="youhao">
        <img class="youhao-a" src="../../../public/images/42_10.jpg" alt="" />
      </div>
    </div>
     <div class="ziliao">
      <p class="tingli">2021年广东省中考英语听力</p>
      <p class="rshu">8286人完成</p>
      <div class="youhao">
        <img class="youhao-a" src="../../../public/images/42_10.jpg" alt="" />
      </div>
    </div>
     <div class="ziliao">
      <p class="tingli">2021年6月六级第一套英语听力</p>
      <p class="rshu">63889人完成</p>
      <div class="youhao">
        <img class="youhao-a" src="../../../public/images/42_10.jpg" alt="" />
      </div>
    </div>
     <div class="ziliao">
      <p class="tingli">2021年6月六级第二套英语听力</p>
      <p class="rshu">63889人完成</p>
      <div class="youhao">
        <img class="youhao-a" src="../../../public/images/42_10.jpg" alt="" />
      </div>
    </div> -->
  </div>
</template>

<script>
import $ from "jquery";
export default {
  name: "monikaotis",

  data() {
    return {
      monikaotis: [],
    };
  },
  created() {
    // ajax发请求
    $.ajax({
      url: "http://localhost:3000/monikaoti",
      success: (data) => {
        this.monikaotis = data;
      },
    });
  },
};
</script>

<style scoped>
.biaoyu {
  height: 0.5rem;
  background-color: #fff;
}
.zuohao {
  margin-top: 0.15rem;
}
.biaoyu h5 {
  width: 1.14rem;
  margin-top: -0.29rem;
  font-size: 0.25rem;
  font-weight: bold;
  margin-left: 1.22rem;
}
ul {
  display: flex;
  margin-left: 0.2rem;
  margin-top: 0.14rem;
}
ul li {
  height: 0.55rem;
  width: 0.93rem;
  border-radius: 0.1rem;
  background-color: #f4f4f4;
  margin-left: 0.12rem;
  text-align: center;
  line-height: 0.55rem;
}
ul li:hover {
  background-color: #3663fe;
  color: #fff;
}
.ziliao {
  height: 0.51rem;
  margin-top: 0.41rem;
  margin-left: 0.28rem;
  background-color: #fff;
}
.tingli {
  font-size: 0.19rem;
}
.rshu {
  margin-top: 0.1rem;
  font-size: 0.1rem;
  color: #a2a2a2;
}
.youhao {
  width: 0.22rem;
  height: 0.22rem;
  margin-left: 3rem;
  margin-top: -0.35rem;
}
.youhao-a {
  height: 0.19rem;
}
</style>